<template>
  <div class="bottom_main flex">
    <div class="flex1 flexC fuwu">
      <p class="title">
        <img class="verticM" style="height: 1.125rem;padding: 0 1rem;" src="../../assets/img/data/20.png" alt="">
        <span class="colorF font_s18">实时在园人数（在园人数超过最大承载力的80%时，柱状图变为红色预警）</span>
      </p>
      <div class="flex1 content">
        <div id="echarts_4" style="width: 81.25rem;height: 15.625rem;"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted () {
    this.echarts_4()
  },
  methods: {
    echarts_4 () {
      let myChart = this.$echarts.init(document.getElementById('echarts_4'))
      // 绘制图表
      myChart.setOption({
        color: ['#9DB851'],
        xAxis: {
          axisLabel: { // 坐标轴的字体颜色
            textStyle: {
              color: '#FFFFFF'
            }
          },
          data: ['东沟静园', '海巷陵园', '长桥山庄 ', '界龙古园', '华南公墓', '天长公墓 ', '金桥堂', '天逸静园', '乐乡公墓', '永安公墓', '天逸静园', '三林静园', '汇龙园 ', '洋泾堂', '张桥堂']
        },
        yAxis: {
          axisLabel: { // 坐标轴的字体颜色
            textStyle: {
              color: '#FFFFFF'
            }
          },
          splitLine: { // 横线显示
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: ['#384a64']
            }
          }
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [50, 350, 360, 150, 500, 200, 100, 200, 190, 400, 290, 140, 360, 100, 100]
          }
          // {
          // name: '销量',
          // type: 'bar',
          // data: [50, 350, 360, 100, 500, 200, 100, 200, 140, 400, 290, 140, 360, 100, 100]
          // }
        ]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.bottom_main{
  height: 30%;
  width: 75%;
  position: absolute;
  top: 66%;
  left: 0;
  // background: #FF0000;
  .fuwu{
    margin-bottom: 1rem;
    margin-left: 1rem;
    margin-right: 2rem;
    .title{
      line-height: 2.75rem;
      border-radius: 5px 5px 0 0;
      background: #556969;
    }
    .content{
      background: #1C1F26;
      img{
        margin-right: 0.3rem
      }
    }
  }
}
</style>
